"use client";

import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
import Image from "next/image";
import Link from "next/link";

interface AnimeItem {
  id: string;
  title: string;
  imageUrl: string;
  time: string;
  episode: string;
}

// Mock data for anime schedule
const weeklySchedule = {
  monday: [
    {
      id: "1",
      title: "我推的孩子",
      imageUrl: "https://ext.same-assets.com/1390906225/2359424230.avif",
      time: "23:00",
      episode: "第8话"
    },
    {
      id: "2",
      title: "刀剑神域：进击篇",
      imageUrl: "https://ext.same-assets.com/1673103096/3727772763.avif",
      time: "23:30",
      episode: "第12话"
    }
  ],
  tuesday: [
    {
      id: "3",
      title: "间谍过家家 第二季",
      imageUrl: "https://ext.same-assets.com/3055384852/199575884.avif",
      time: "18:30",
      episode: "第10话"
    }
  ],
  wednesday: [
    {
      id: "4",
      title: "魔都精兵的奴隶",
      imageUrl: "https://ext.same-assets.com/1520082429/1653749082.avif",
      time: "19:30",
      episode: "第8话"
    }
  ],
  thursday: [
    {
      id: "5",
      title: "咒术回战 第二季",
      imageUrl: "https://ext.same-assets.com/887027569/1596995527.avif",
      time: "19:00",
      episode: "第24话"
    }
  ],
  friday: [
    {
      id: "6",
      title: "名侦探柯南",
      imageUrl: "https://ext.same-assets.com/825251379/673077037.avif",
      time: "17:30",
      episode: "第1109话"
    }
  ],
  saturday: [
    {
      id: "7",
      title: "鬼灭之刃 柱训练篇",
      imageUrl: "https://ext.same-assets.com/3678834109/3027866853.avif",
      time: "12:30",
      episode: "第6话"
    }
  ],
  sunday: [
    {
      id: "8",
      title: "海贼王",
      imageUrl: "https://ext.same-assets.com/2790874527/1227650591.avif",
      time: "10:00",
      episode: "第1112话"
    }
  ]
};

function AnimeScheduleDay({ animeList }: { animeList: AnimeItem[] }) {
  return (
    <div className="space-y-3">
      {animeList.length === 0 ? (
        <div className="p-6 text-center text-gray-500">今天没有更新的番剧</div>
      ) : (
        animeList.map((anime) => (
          <Link href={`/anime/${anime.id}`} key={anime.id}>
            <div className="flex space-x-3 p-2 rounded-md hover:bg-gray-50">
              <div className="relative w-16 h-20 shrink-0">
                <Image
                  src={anime.imageUrl}
                  alt={anime.title}
                  fill
                  className="object-cover rounded-sm"
                />
              </div>
              <div className="flex flex-col justify-center">
                <h3 className="text-sm font-medium line-clamp-1">{anime.title}</h3>
                <div className="mt-1 text-xs text-gray-500">{anime.time} · {anime.episode}</div>
              </div>
            </div>
          </Link>
        ))
      )}
    </div>
  );
}

export default function AnimeSchedule() {
  return (
    <div className="container mx-auto py-6">
      <div className="flex items-center justify-between mb-4">
        <h2 className="text-xl font-bold">新番时间表</h2>
        <Link href="/anime/schedule" className="text-sm text-primary hover:underline">
          完整时间表
        </Link>
      </div>

      <div className="bg-white rounded-lg shadow-sm border p-4">
        <Tabs defaultValue="monday" className="w-full">
          <TabsList className="grid grid-cols-7 mb-4">
            <TabsTrigger value="monday">周一</TabsTrigger>
            <TabsTrigger value="tuesday">周二</TabsTrigger>
            <TabsTrigger value="wednesday">周三</TabsTrigger>
            <TabsTrigger value="thursday">周四</TabsTrigger>
            <TabsTrigger value="friday">周五</TabsTrigger>
            <TabsTrigger value="saturday">周六</TabsTrigger>
            <TabsTrigger value="sunday">周日</TabsTrigger>
          </TabsList>

          <TabsContent value="monday">
            <AnimeScheduleDay animeList={weeklySchedule.monday} />
          </TabsContent>

          <TabsContent value="tuesday">
            <AnimeScheduleDay animeList={weeklySchedule.tuesday} />
          </TabsContent>

          <TabsContent value="wednesday">
            <AnimeScheduleDay animeList={weeklySchedule.wednesday} />
          </TabsContent>

          <TabsContent value="thursday">
            <AnimeScheduleDay animeList={weeklySchedule.thursday} />
          </TabsContent>

          <TabsContent value="friday">
            <AnimeScheduleDay animeList={weeklySchedule.friday} />
          </TabsContent>

          <TabsContent value="saturday">
            <AnimeScheduleDay animeList={weeklySchedule.saturday} />
          </TabsContent>

          <TabsContent value="sunday">
            <AnimeScheduleDay animeList={weeklySchedule.sunday} />
          </TabsContent>
        </Tabs>
      </div>
    </div>
  );
}
